<template>
  <div class="Pages">
    <div class="block" v-if="total">
    <Details 
     v-if="isGetData"
    :currentPageData="currentPageData"
    ></Details>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  <div v-else class="empty">
    暂无文物信息
  </div>
  </div>
</template>

<script>
import Details from '@/components/details.vue'
export default {
  components:{
    Details,
  },
    props:{
       allDate:{ 
        type: Array,//所有数据
        default(){}
       },
       pageSize:{}, //每页显示条数
       total:{},//总条数
    },
    watch:{
      allDate(newVal, oldVal){
    // newVal是新值，oldVal是旧值
        this.allDate = newVal
        this.init();
      }
    },
    data(){
        return {
            isGetData:false, //判断是否currentPageData被成功赋值
            currentPageData: [], // 当前页显示的数据
            currentPage: 1,// 当前显示的页码，默认为第一页
            
        }
    },
    mounted(){
      this.init();
    },
    methods:{
      init(){
          this.currentPageData=this.allDate.slice(0,1*this.pageSize)  
          this.isGetData=true
          console.log(`当前页数据`,this.currentPageData);
      },
      handleCurrentChange(val) {
        this.currentPageData=this.allDate.slice((val-1)*this.pageSize,val*this.pageSize);//把每页的数据传给子组件
        console.log(`当前页: ${val}`);
        console.log(`当前页数据`,this.currentPageData);
        console.log("所有数据",this.allDate)
      }
    }
}
</script>

<style>
.Pages{
  background-color:#5f806f;
  text-align: center;
}
.el-pager li {
  border-radius: 50%;
  height: 35px !important;
  line-height: 35px !important;
  margin:0px 10px !important;
}
.el-pagination .btn-next{
  border-radius: 10px;
}
.el-pagination .btn-prev{
  border-radius: 10px;
}
.el-pagination button, .el-pagination span:not([class*=suffix]) {
  height: 35px !important;
  line-height: 35px !important;
  min-width: 40px !important;
}
.el-pager li.active{
  background-color:#CA9E6A;
  color:#ffffff !important;
}
.empty{
height: 700px;
text-align: center;
line-height: 700px;
color:#ffffff;
font-size:20px;
}
</style>